<template>
  <div>
    <nav-bar class="nav" ><div slot="center" class="nav_title">分类</div></nav-bar>

      <div class="content">
        <scroll class="scroll left" >
          <left :titles="leftTitle" @changeIndex="changeIndex"></left>
        </scroll>
        <scroll class="scroll right" :probeType="2" ref="scroll" @sendOrdinate="sendOrdinate">
          <right :datas="rightData">
          </right>
        </scroll>
        <back @click.native="backTop" v-show="backShow"></back>

      </div>

  </div>
</template>

<script>
  import {categoryGetAll,categoryGetData,categoryGetDetail} from 'network/category/category.js'
  import left from './components/left.vue'
  import right from './components/right.vue'

  import scroll from 'components/common/scroll/scroll.vue'
  import navBar from 'components/common/navBar/navBar.vue'
  import back from 'components/common/backTop/backTop.vue'
  import {backTopMixin} from 'common/mixin.js'

  export default{
    name:'',
    data(){
      return {
        allData:[],
        leftTitle:[],
        rightData:[]
      }
    },
    methods:{
      getRightData(type){
        categoryGetData(type).then(res=>{
          console.log(res.data.list);
          this.rightData=res.data.list
        })
      },
      changeIndex(i){
        this.getRightData(this.allData[i].maitKey)
      },
      sendOrdinate(i){
        i.y*=3
        this.listenBackShow(i)
      }
    },
    created() {
      categoryGetAll().then(res=>{
        this.allData=res.data.category.list;
        for(let i of this.allData){
          this.leftTitle.push(i.title)
        }
        this.changeIndex(0)
      })
    },
    mounted() {

    },
    mixins:[backTopMixin],
    components:{
      left,scroll,navBar,right,back
    }
  }
</script>

<style scoped>
  .nav{
    background-color: var(--color-tint);
    color: white;
    font-size: 16px;
  }
  .nav_title{
    margin: 0 auto;
  }
  .scroll{
    height: calc(100vh - 44px - 40px);
    /* position: relative; */
    overflow: hidden;
    /* top: 44px; */
  }
  .content{
    display: flex;
  }
  .left{
    flex: 1;
  }
  .right{
    flex: 4;
  }
</style>
